﻿<template>
	<div class='content'>
		<div class='banner'>
			<h3 id='download'>EEA以太联合 APP</h3>
			<p>全新 1.8 版本，邀您共享</p>
			<img :src='src' />
		</div>
		<div class='teach'>
			<h3>使用方法</h3>
			<div class='step'>
				<div class='container' v-for='item in docs'>
					<img :src='item.src' />
					<h3 v-html='item.h3'></h3>
					<p v-html='item.p'></p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	const docs = [{
		src: 'static/img/steps1.jpg',
		h3: '<em>①</em>获取下载地址',
		p: '点击【马上下载】，<br>手机或者PC端下载软件'
	},{
		src: 'static/img/steps2.jpg',
		h3: '<em>②</em>注册账号',
		p: '注册您的专属账号<br>保护好账号信息'
	},{
		src: 'static/img/steps3.jpg',
		h3: '<em>③</em>登录软件',
		p: '登录成功，正式加入 EEA以太联合<br>购买或者卖出您的虚拟货币，实现财富的快速积累'
	}];
	export default {
		name: 'shareContent',
		data () {
			return {
				src: 'static/img/download.jpg',
				docs: docs
			}
		}
	}
</script>
<style lang='scss'>
	#download{
		text-align: left;
		position: absolute;
		top: 38%;
		left: 29%;
		z-index: 8;
		color: white;
		font-size: 28px;
		color: #e9e7e5;
		font-weight: 300;
		margin: 0;
		padding: 0;
        animation: none;
	}
	.content {
		.banner {
			position: relative;
			width: 100%;
			top: -13%;
			left: 0;
			margin: 0;
			padding: 0;
			h3+p {
				font-size: 16px;
				color: #e6e5e3;
				font-weight: 300;
				position: absolute;
				top: 44%;
				left: 29%;	
				z-index: 8;
				margin: 0;
				padding: 0;
			}
		}
	}
	.teach{
		margin-bottom: 7%;
		h3 {
			padding: 50px 0;
			font-weight: 500;
			font-size: 30px;
			text-align: center;
			color: #333333;
		}
	}
	.mar{
		margin: 50px 0 50px;
		p {
			line-height: 32px;
			font-size: 14px;
			color: #8d8d8d;
			text-align: center;
		}
	}
	.step{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.container {
		width: 300px;
		flex: 0 1 auto;
		img{
			width: 300px;
			height: 300px;
		}
		h3 {
			margin-bottom: 10px;
			text-align: center;
			font-size: 18px;
			color: #333333;
			font-weight: 500;
			padding: 0;
		}
		p {
			line-height: 30px;
			font-size: 14px;
			color: #333333;
			text-align: center;
			opacity: 0.6;
		}
	}
	em{
		font-style: normal;
		font-size: 22px;
		vertical-align: text-bottom;
		line-height: 27px;
	}
</style>